<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <link rel="icon" href="favicon.ico" />
    <title>vis.js - Groups 문서.</title>

    <!-- Bootstrap core CSS -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <!-- Tipue vendor css -->
    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.css"
      rel="stylesheet"
    />

    <link href="../../common-docs-files/css/style.css" rel="stylesheet" />
    <link href="../css/overrides.css" rel="stylesheet" />

    <link
      href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css"
      type="text/css"
      rel="stylesheet"
    />
    <script
      type="text/javascript"
      src="../../common-docs-files/js/toggleTable.js"
    ></script>
    <script
      type="text/javascript"
      src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"
    ></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/12.1.5/js/smooth-scroll.min.js"></script>
    <script language="JavaScript">
      smoothScroll.init();
    </script>

    <style></style>
  </head>

  <body onload="prettyPrint();">
    <div class="navbar-wrapper">
      <div class="container">
        <nav class="navbar-inverse navbar-static-top" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar"
                aria-expanded="false"
                aria-controls="navbar"
              >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand hidden-sm" href="./index.html">vis.js</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav"></ul>
              <form class="navbar-form navbar-right" role="search">
                <input
                  name="q"
                  id="tipue_search_input"
                  autocomplete="off"
                  type="text"
                  class="form-control"
                  placeholder="Enter keywords"
                />
                <button
                  type="button"
                  class="btn btn-default"
                  onclick="vis.initSiteSearch(true);"
                >
                  Go!
                </button>
              </form>
              <div id="search-results-wrapper" class="panel panel-default">
                <div class="panel-body">
                  <div id="tipue_search_content"></div>
                </div>
              </div>
              <div id="keyword-info" class="panel panel-success">
                <div class="panel-body">
                  Found <span id="keyword-count"></span> results. Click
                  <a id="keyword-jumper-button" href="">here</a> to jump to the
                  first keyword occurence!
                </div>
              </div>
            </div>
          </div>
        </nav>
      </div>
    </div>

    <div class="container full">
      <h1>Network - groups</h1>

      <p>Group의 스타일을 다루어 봅니다.</p>
      <h3>옵션</h3>

      <p>canvas에 대한 옵션은 'groups'이라고 이름붙은 object를 포함합니다.</p>
      <p>옵션 살펴보기를 클릭하여 옵션을 사용하는 방법을 볼 수 있습니다.</p>
      <ul class="nav nav-tabs">
        <li role="presentation" class="active" onclick="toggleTab(this)">
          <a href="#">옵션 숨기기</a>
        </li>
        <li
          role="presentation"
          onclick="toggleTab(this);"
          targetNode="fullOptions"
        >
          <a href="#">옵션 살펴보기</a>
        </li>
      </ul>
      <br />
      <pre class="prettyprint lang-js options hidden" id="fullOptions">
var options = {
  groups:{
    useDefaultGroups: true,
    myGroupId:{
      /*node options*/
    }
  }
}

network.setOptions(options);
</pre
      >
      <p>모든 개별 옵션이 여기에 설명되어 있습니다:</p>
      <table class="options">
        <tr>
          <th>이름</th>
          <th>Type</th>
          <th>Default</th>
          <th>Description</th>
        </tr>
        <tr>
          <td>useDefaultGroups</td>
          <td>Boolean</td>
          <td><code>true</code></td>
          <td>
            만약 당신의 Nodes이 Group들의 모듈에 속하지 않기로 정의된 Group을
            가진다면, 모듈은 각각의 알 수 없는 Group에 하나씩 할당하면서 해당
            Group을 순환합니다. 모두 사용될 때, 그것은 첫 번째 Group으로
            되돌아갑니다. 이를 거짓 값으로 설정함으로써, 초기 Group들은 이
            cycle.group* Object에서 사용되지 않을 것입니다.
          </td>
        </tr>
        <tr>
          <td>group*</td>
          <td>Object</td>
          <td><code></code></td>
          <td>
            하위 Group에 적용되는 스타일 정보를 포함하는 여러 Group을 추가할 수
            있습니다. 여기서 Node 모듈에 설명되는 모든 옵션들은 여기서 사용될 수
            있습니다. (동일한 ID 또는 Node의 Group의 x,y 좌표를 설정하지 않을
            것입니다.) Example:
            <pre class="prettyprint lang-js options">
var nodes = [
    {id:1, group:'myGroup', label:"I'm in a custom group called 'myGroup'!"}
]

var options = {
  groups: {
    myGroup: {color:{background:'red'}, borderWidth:3}
  }
}
</pre
            >
            *) 예시와 같이 보여진 것처럼 그룹이라 불리지 않는 옵션이지만,
            'useDefaultGroups'.을 제외하고 사용자 지정 ID로 호출할 수 있습니다.
          </td>
        </tr>
      </table>

      <div class="flagbar">
        <a href="../../docs/network/groups.html" title="English"
          ><span class="flag en"></span
        ></a>
        <a href="../../docs-kr/network/groups.html" title="Korean"
          ><span class="flag kr"></span
        ></a>

        <br />

        Third party docs:
        <a href="https://ame.cool/core/frontend-tools/" title="Chinese"
          ><span class="flag zh"></span
        ></a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="../../common-docs-files/js/ie10-viewport-bug-workaround.js"></script>
    <!-- jquery extensions -->
    <script src="../../common-docs-files/js/jquery.highlight.js"></script>
    <script src="../../common-docs-files/js/jquery.url.min.js"></script>
    <!-- Tipue vendor js -->
    <script src="../../common-docs-files/js/tipuesearch.config.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Tipue-Search/5.0.0/tipuesearch.min.js"></script>
    <!-- controller -->
    <script src="../../common-docs-files/js/main.js"></script>
  </body>
</html>
